<

ハンドルスクロール

多くのアプリにはコンテンツのリストが備わっていますが、 電子メールクライアントから音楽アプリまで。 リストに予期したコンテンツが含まれていることを確認するには ウィジェットテストを使用して、 特定の項目を検索するには、リストをスクロールする方法が必要です。

統合テストを通じてリストをスクロールするには、 によって提供されるメソッドを使用します。WidgetTesterクラス、 に含まれているものflutter_testパッケージ:

このレシピでは、アイテムのリストをスクロールして、 特定のウィジェットが表示されていることを確認し、長所と短所について話し合います。 さまざまなアプローチ。

このレシピでは次の手順を使用します。

  1. 項目のリストを含むアプリを作成します。
  2. リストをスクロールするテストを作成します。
  3. テストを実行します。

1. アイテムのリストを含むアプリを作成する

このレシピは、項目の長いリストを表示するアプリを構築します。 このレシピをテストに重点を置くには、で作成したアプリを使用してください。長いリストを扱うレシピ。 長いリストの扱い方がわからない場合は、 紹介についてはそのレシピを参照してください。

操作したいウィジェットにキーを追加します 統合テスト内で。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<String>.generate(10000, (i) => 'Item $i'),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    const title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          // Add a key to the ListView. This makes it possible to
          // find the list and scroll through it in the tests.
          key: const Key('long_list'),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                items[index],
                // Add a key to the Text widget for each item. This makes
                // it possible to look for a particular item in the list
                // and verify that the text is correct
                key: Key('item_${index}_text'),
              ),
            );
          },
        ),
      ),
    );
  }
}

2. リストをスクロールするテストを作成します。

これで、テストを書くことができます。この例では、項目のリストをスクロールして、 特定の項目がリストに存在することを確認します。のWidgetTesterクラス を提供しますscrollUntilVisible()リストをスクロールするメソッド 特定のウィジェットが表示されるまで。の高さがあるため、これは便利です。 リスト内の項目はデバイスによって異なる場合があります。

すべてのアイテムの高さを知っていると仮定するのではなく、 リスト内、または特定のウィジェットがすべてのデバイスでレンダリングされること、 のscrollUntilVisible()メソッドは繰り返しスクロールします 探しているものが見つかるまでアイテムのリストを表示します。

次のコードは、scrollUntilVisible()方法 リスト内で特定のアイテムを探します。このコードは というファイルtest/widget_test.dart


// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:scrolling/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(MyApp(
      items: List<String>.generate(10000, (i) => 'Item $i'),
    ));

    final listFinder = find.byType(Scrollable);
    final itemFinder = find.byKey(const ValueKey('item_50_text'));

    // Scroll until the item to be found appears.
    await tester.scrollUntilVisible(
      itemFinder,
      500.0,
      scrollable: listFinder,
    );

    // Verify that the item contains the correct text.
    expect(itemFinder, findsOneWidget);
  });
}

3. テストを実行する

プロジェクトのルートから次のコマンドを使用してテストを実行します。

flutter test test/widget_test.dart